<template>
  <div class="activity_new">
    <div>
      <ImgT class="imgs" :src="activityItem?.pic_link" :key="activityItem?.pic_link" alt="" />
    </div>

    <div class="balance">
      <img :src="avatarUrl" alt="" class="mr-10" />
      <div class="balance_text">
        <div>
          <span>首存奖金</span>
          <span class="num_color">1000</span>
        </div>
        <span class="fs_12">您的奖金还未生效，可立即前往开启！</span>
      </div>
    </div>

    <div class="content_box">
      <div class="content_box_title">活动内容</div>
      <div class="content_box_main">
        <div class="content_box_main_list">
          <div class="item" v-for="i in taskList" :key="i.id">
            <div class="item_head">
              {{ i.label }}
              <img src="/imgs/activity/info.png" @click="showInfoClick(i)" alt="" class="item_main_img_info" />
            </div>
            <div class="item_main">
              <div class="item_main_content">
                <div class="item_main_per">{{ i.prize_ratio + "%" }}</div>
                <img src="/imgs/activity/shoucun.webp" alt="" class="item_main_img1" />
                <img :src="i.icon" alt="" class="item_main_img1_icon" />
              </div>
              <div class="item_main_btn">
                <img src="/imgs/activity/lock.webp" alt="" class="item_main_img_lock" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 活动规则 -->
    <div class="content_box">
      <div class="content_box_title">{{ t("event_content") }}</div>
      <div class="content_box_main">
        <ol>
          <li>{{ t("newbie_content1") }}</li>
          <li>{{ t("newbie_content2") }}</li>
          <li>{{ t("newbie_content3") }}</li>
          <li>{{ t("newbie_content4") }}</li>
          <li>{{ t("newbie_content5") }}</li>
        </ol>
      </div>
    </div>
  </div>
  <div class="btn_group">
    <nut-button class="btn_1">{{ t("first_deposit_activity_rule") }}</nut-button>
    <nut-button :class="['btn_2', { is_get: newbees_info?.status > 1 }]" @click="getFunds"
      :disabled="newbees_info?.status != 1">
      开启奖金
    </nut-button>
    <nut-button class="btn_1" @click="submit">{{ t("share") }}</nut-button>
    <Toast v-model:visible="showToast">{{
      t(toast_value) + Intl.NumberFormat().format(newbees_info?.amount)
    }}</Toast>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";

import Toast from "@/components/Toast.vue";
import { avatarUrl } from "@/utils/commonVar";
import { showDialog } from "@nutui/nutui";
const { t } = useI18n();

defineProps({
  activityItem: {
    type: Object,
    default: () => { },
  },
});

const taskList = ref([
  {
    label: "立即领取",
    prize_ratio: "5",
    process: "-1",
    icon: "/imgs/activity/task1.webp",
    id: 1,
  },
  {
    label: "关注任务",
    prize_ratio: "5",
    process: "-1",
    icon: "/imgs/activity/task2.webp",
    id: 2,
  },
  {
    label: "邀请任务",
    prize_ratio: "5",
    process: "-1",
    icon: "/imgs/activity/task3.webp",
    id: 3,
  },
  {
    label: "10倍流水",
    prize_ratio: "5",
    process: "-1",
    icon: "/imgs/activity/task4.webp",
    id: 4,
  },
  {
    label: "25倍流水",
    prize_ratio: "5",
    process: "-1",
    icon: "/imgs/activity/task4.webp",
    id: 5,
  },
  {
    label: "50倍流水",
    prize_ratio: "5",
    process: "-1",
    icon: "/imgs/activity/task4.webp",
    id: 6,
  },
]);

// 说明弹窗
const showInfoClick = (item: any) => {
  console.log(77777, item);
  const txtObj: any = {
    1: "立即获得奖励，快去领取吧",
    2: "请联系客服获得首充X3任务详情，2分钟即可完成任务",
    3: "邀请一位好友并完成首充，即可获得丰厚奖励",
    4: "流水达到充值金额的10倍，就可额外获得充值金额的30%，快去游戏吧",
    5: "流水达到充值金额的25倍，就可额外获得充值金额的60%，快去游戏吧",
    6: "流水达到充值金额的50倍，就可额外获得充值金额的80%，快去游戏吧",
  };

  showDialog({
    title: "温馨提示",
    content: txtObj[item.id],
    noCancelBtn: item.id != 2,
    okText: item.id != 2 ? "确定" : "联系客服",
    onOk: () => {
      if (item.id == 2) {
        const query = NetPacket.req_contact_customer_service();
        PKwebsocket.instance.send(query, true, {
          callbackName: "msg_notify_newbees_prize",
          callback: () => { },
        });
      }
    },
  });
};

const visible = ref(false);
// const is_get_funds = ref(false);
const newbees_info: any = ref({});

const showToast: any = ref(false);
const toast_value = ref("");

const submit = () => {
  visible.value = true;
};

// 领取奖励
const getFunds = () => {
  // const query = NetPacket.req_newbees_prize();
  // PKwebsocket.instance.send(query, true, {
  //   callbackName: "msg_notify_newbees_prize",
  //   callback: get_prize_info,
  // });
};

// 新手消息获取
const get_recharge_info = (rs: any) => {
  console.log(777777, rs);
  newbees_info.value = rs;
  taskList.value.forEach((item, index) => {
    item.prize_ratio = rs.prize_ratio[index];
    item.process = rs.process[index];
  });
  console.log(8888888, taskList.value);
};
// const get_prize_info = () => {
//   is_get_funds.value = true;
//   showToast.value = true;
//   toast_value.value = "receive_ok";
//   const query = NetPacket.req_newbees_info();
//   PKwebsocket.instance.send(query, true, {
//     callbackName: "msg_notify_newbees_info",
//     callback: get_newbees_info,
//   });
// };

onMounted(async () => {
  const query = NetPacket.req_first_recharge_info();
  PKwebsocket.instance.send(query, true, {
    callbackName: "msg_notify_first_recharge_info",
    callback: get_recharge_info,
  });
});
</script>

<style lang="scss" scoped>
.activity_new {
  // height: 100%;
  // padding: 0px 0px 100px;
  // overflow: auto;

  .imgs {
    width: 100%;
  }

  .content_box {
    margin-top: 10px;
    width: 100%;

    border-radius: 8px;
    background: #131232;
    overflow: hidden;

    .content_box_title {
      height: 34px;
      background: #1b1f4b;
      color: #ffffff;
      line-height: 34px;
      padding-left: 10px;
    }

    .content_box_main {
      padding: 12px 10px;

      .content_box_main_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .item {
        width: 104px;
        height: 130px;
        background: #ffffff;
        border-radius: 8px;
        margin-bottom: 8px;
        overflow: hidden;

        .item_head {
          position: relative;
          height: 26px;
          display: flex;
          justify-content: center;
          font-size: 12px;
          align-items: center;
          color: #ffffff;
          background: linear-gradient(91.03deg, #ffa451 0.29%, #ff6b18 99.39%);
        }

        .item_main {
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;

          .item_main_content {
            margin-top: 5px;
            position: relative;

            .item_main_per {
              width: 42px;
              height: 18px;
              border: 1px solid #ff6f1d;
              border-radius: 20px;
              backdrop-filter: blur(8px);
              display: flex;
              justify-content: center;
              color: #ff6f1d;
              position: absolute;
              left: -14px;
              bottom: 15px;
            }

            .item_main_img1_icon {
              position: absolute;
              right: -14px;
              bottom: 10px;
              height: 31px;
            }
          }

          .item_main_btn {
            width: 80px;
            height: 24px;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(180deg, #7f7a94 0.17%, #6a6580 100%);

            .item_main_img_lock {
              height: 14px;
            }
          }

          .item_main_img1 {
            width: 69px;
            height: 69px;
          }
        }
      }
    }
  }
}

.btn_group {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0px;
  display: flex;
  height: 64px;
  align-items: center;
  box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
  background: var(---, #131232);
  padding-left: 13px;

  gap: 8px;

  .btn_1 {
    height: 44px;
    border-radius: 8px;
    width: 96px;
    background: #282747 !important;
  }

  .btn_2 {
    height: 44px;
    border-radius: 8px;
    width: 138px;
  }
}

.submit {
  width: 95%;
  height: 44px;
  border-radius: 8px;
  position: fixed;
  bottom: 2px;
  left: 2.5%;
}

.fs_12 {
  font-size: 12px;
}

.num_color {
  margin-left: 5px;
  color: #ffe141;
}

ol {
  color: #ffffff;
  font-size: 12px;

  li {
    margin-bottom: 6px;
  }
}

.my_record {
  position: fixed;
  right: 10px;
  bottom: 100px;
  height: 50px;
}

.btn_5 {
  height: 44px;
  border-radius: 8px;
  width: 100%;
}

.get_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 20px;

  .amount {
    color: #ffe141;
  }
}

.is_get {
  background: #a6a2ba;
}

.balance {
  width: 100%;
  height: 74px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  border-radius: 8px;
  background: linear-gradient(94.51deg, #fa397e 0%, #ff852d 99.32%);

  img {
    height: 44px;
    width: 44px;
    border: 2px solid #aeacff;
    border-radius: 50%;
  }

  .balance_text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 10px;
    color: #ffffff;
    font-size: 14px;
  }
}

.item_main_img_info {
  height: 16px;
  width: 16px;
  position: absolute;
  right: 5px;
}
</style>
